<template>
<div id="Transaction">
	<div class="search_box">
		<div class="container">
			<p>{{ $lang("TRANSACTION") }}</p>
		 		<el-input v-model="searchInput" :placeholder="$lang('SEARCH_TIP')">
		 			<el-button slot="append" type="danger" @click="getTransactionsBySearch(1)"><img src="../../assets/img/search.png" alt="$lang('LATEST_BLOCKS')"><span>{{ $lang("SEARCH") }}</span></el-button>
		 		</el-input>
		</div>
	</div>
	<div class="tran_table">
		<div class="container">
			<div class="bread_rumb clearfix">
				<div class="f_l">
					<el-breadcrumb separator-class="el-icon-arrow-right">
					  <el-breadcrumb-item :to="{ path: '/' }">{{ $lang('HOME') }}</el-breadcrumb-item>
					  <el-breadcrumb-item>{{ $lang('TRANSACTION') }}</el-breadcrumb-item> 
					</el-breadcrumb>
				</div>
			</div>
			<el-table
		    :data="transactionList"
		    style="width: 100%;border:10px;background-color: #212C4F;"
            :empty-text ="$lang('No_data')"
		  	:row-style="{
		  		'border':'none',
		  		'background-color':'#1D2748',
		  		'border-bottom':'none',
		  		'border-radis':'5px',
		  	}"	
		  	>
		    <el-table-column
		      prop="hash"
		      :label="$lang('CURRENT_HASH')"
		      width="200">
                <template scope='scope' ><span class="callspanT">{{ scope.row.hash }}</span></template>
		    </el-table-column>
		    <el-table-column
		      prop="payaddress"
		      :label="$lang('SENDER')"
		      width="200">
              <template scope='scope' ><router-link class="callspan"  :to="{path:'/account/sender/' + scope.row.payaddress }">{{ scope.row.payaddress }}</router-link></template>
		    </el-table-column>
		    <el-table-column
		      prop="receiptaddress"
              width="200"
		      :label="$lang('RECEIVER')">
              <template scope='scope' ><router-link class="callspan"  :to="{path:'/account/receiver/' + scope.row.receiptaddress }">{{ scope.row.receiptaddress }}</router-link></template>
		    </el-table-column>
		    <el-table-column
		      prop="tradetype"
		      :label="$lang('TYPE')"
		      width="140">
              <template scope='scope' >
                    <span v-if="scope.row.tradetype == 'TRANSFER'">普通转账</span>
                    <span v-else-if="scope.row.tradetype == 'VOTE'">投票</span>
                    <span v-else-if="scope.row.tradetype == 'TRUSTEE_CANNEL'">受托人撤销注册</span>
                    <span v-else-if="scope.row.tradetype == 'TRUSTEE_REGISTER'">受托人注册</span>
                    <span v-else-if="scope.row.tradetype == 'VOTER_REGISTER'">投票人注册</span>
                    <span v-else-if="scope.row.tradetype == 'VOTER_CHNNEL'">投票人撤销注册</span>
                    <span v-else-if="scope.row.tradetype == 'BLOCK_REWARD'">出块奖励</span>
                    <span v-else-if="scope.row.tradetype == 'CONFIRM_REWARD'">确认流水奖励</span>
              </template>
		    </el-table-column>
		    <el-table-column
		      prop="blockheight"
		      :label="$lang('HEIGHT')"
		      width="140">
		    </el-table-column>
		    <el-table-column
		      prop="value"
		      :label="$lang('FEES')">
              <template scope='scope' >
                    <p>{{scope.row.value}} {{scope.row.token || 'EQU'}}</p>
              </template>
		    </el-table-column>
            <el-table-column
		      prop="value"
		      :label="$lang('More')">
              <template scope='scope' ><router-link style="cursor: pointer;color: #cca33c;" :to="{path:'/TransactionDetailed/' + scope.row.hash}">>></router-link></template>
		    </el-table-column>
		  </el-table>
		  <el-pagination
			  :current-page="currentPage"
			  layout="prev, pager, next"			  
			  :total="pages * 10"
			  @current-change="getTransaction"
              v-if="companyId == 1"
			  >
			</el-pagination>
            <el-pagination
			  :current-page="currentPage"
			  layout="prev, pager, next"			  
			  :total="pages * 10"
			  @current-change="getTransaction2"
              v-if="companyId == 2"
			  >
			</el-pagination>
            <el-pagination
			  :current-page="currentPage"
			  layout="prev, pager, next"			  
			  :total="pages * 10"
			  @current-change="getTransactionBySearch"
              v-if="companyId == 3"
			  >
			</el-pagination>
		</div>
	</div>
</div>
</template>

<script>
import axios from 'axios';
import { gets } from '@/api/api.js';
import url from '@/api/url.js';
export default {
	data(){
		return {
			searchInput:"",
			currentPage:1, // 分页当前页
            pageSize:5, // 每页条数
            pages: 0,
            transactionList: [],
            companyId: 1
		}
	},
	mounted(){
        if (this.$route.query.company !== undefined) {
            this.searchInput = this.$route.query.company
            this.companyId = 2
            this.getTransaction2(1); // 企业
        } else if(this.$route.query.searchInput !== undefined) {
            this.searchInput = this.$route.query.searchInput
            this.companyId = 3
            this.getTransactionBySearch(1)   // 首页
        } else{
            this.getTransaction(1); // 默认
            this.companyId = 1
        }
	},
	methods:{
		changePage(currentPage){
			this.currentPage = currentPage;
			this.getPageList();
        },
        getTransaction(type){ // 默认
            let that = this
            console.log(type)
            const loading = this.$loading({
                text: that.$lang('loading'),
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            axios.get(url.urlblockH + '/transaction/pageList', {
                params: {
                    pageNum: type,
                    pageSize: 8
                }
            })
            .then(function (res) {
                loading.close()
                that.transactionList = res.data.data.list
                that.pages = res.data.data.pages
            })
            .catch(function (error) {
                loading.close()
                console.log(error);
            })
        },
        getTransaction2(type){ // 企业搜索跳转
            let that = this
            // console.log(type)
            const loading = this.$loading({
                text: that.$lang('loading'),
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            axios.get(url.urlblockH + '/transaction/getTransactionByAddress', {
                params: {
                    address: that.searchInput,
                    pageNum: type,
                    pageSize: 8
                }
            })
            .then(function (res) {
                loading.close()
                that.transactionList = res.data.data.list
                that.pages = res.data.data.pages
            })
            .catch(function (error) {
                loading.close()
                console.log(error);
            })
        },
        getTransactionsBySearch(type){ // 本身交易
            let that = this
            if (that.searchInput == '') {
                this.getTransaction(1);
            } else {
                const loading = this.$loading({
                    text: that.$lang('loading'),
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                axios.get(url.urlblockH + '/transaction/getTransactionsBySearch', {
                    params: {
                        search: that.searchInput,
                        pageNum: type,
                        pageSize: 8
                    }
                })
                .then(function (res) {
                    loading.close()
                    that.transactionList = res.data.data.list
                    that.pages = res.data.data.pages         
                })
                .catch(function (error) {
                    loading.close()
                    console.log(error);
                })
            }
        },
        getTransactionBySearch(type){ // 首页搜索跳转
            let that = this
            const loading = this.$loading({
                text: that.$lang('loading'),
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            axios.get(url.urlblockH + '/block/getTransactionBySearch', {
                params: {
                    search: that.searchInput,
                    pageNum: type,
                    pageSize: 8
                }
            })
            .then(function (res) {
                loading.close()
                that.transactionList = res.data.data.list
                that.pages = res.data.data.pages 
            })
            .catch(function (error) {
                loading.close()
                console.log(error);
            })
        }
	}
	
}
</script>
<style lang="scss" scoped >
@import '~assets/scss/transaction.scss';
.callspan{
    cursor: pointer;
    color: rgb(204, 163, 60) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.callspanT{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: Default !important;
}
</style>